<template>
  <div class="tool">
    <div class="file" @click="openList()" v-if="componentInfoTool.fileList">
      <span>
        文件序列
        <span v-show="currentIndex || currentIndex == 0">：{{currentIndex}}</span>
      </span>
    </div>
    <div class="progress" v-if="componentInfoTool.progress">标注进度 {{finishNum}}/{{all}}</div>
    <div class="allFile" v-if="componentInfoTool.dataType">
      <span v-if="fileType==1">全部数据</span>
      <span v-if="fileType==2">好数据</span>
      <span v-if="fileType==3">坏数据</span>
      <span v-if="fileType==4">未标注</span>
      <ul class="fileType">
        <li @click="chooseType(1)">全部数据</li>
        <li @click="chooseType(2)">
          好数据
          <span v-if="dataNum">({{dataNum.correct}})</span>
        </li>
        <li @click="chooseType(3)">
          坏数据
          <span v-if="dataNum">({{dataNum.bad}})</span>
        </li>
        <li @click="chooseType(4)">
          未标注
          <span v-if="dataNum">({{dataNum.unfinish}})</span>
        </li>
      </ul>
    </div>
    <div class="prevData" @click="pre" v-if="componentInfoTool.pre">上一条</div>
    <div class="nextData" @click="next" v-if="componentInfoTool.next">下一条</div>
    <div class="badData" v-show="!currentIsBad" @click="markBad" v-if="componentInfoTool.markBad">标为坏数据</div>
    <div class="badData" :class="{ r : currentIsBad}" v-show="currentIsBad" @click="markBad">标为好数据</div>
    <div class="slide" @click="changeShow" :class="{'go' : showHead, 'aa' : !showHead}"></div>
    <div class="line"></div>
  </div>
</template>
<script>
export default {
    name: "Tool",
    data() {
        return {};
    },
    props: [
        "showHead",
        "fileType",
        "finishNum",
        "currentIndex",
        "dataNum",
        "currentIsBad",
        "all",
        "componentInfoTool"
    ],
    methods: {
        openList: function() {
            this.$emit("openList");
        },
        changeShow: function() {
            this.$emit("changeShow");
        },
        chooseType: function(val) {
            this.$emit("chooseType", val);
        },
        pre: function() {
            this.$emit("pre");
        },
        next: function() {
            this.$emit("next");
        },
        markBad: function() {
            this.$emit("markBad");
        }
    }
};
</script>
<style>
.tool .file:before {
    background: url("/assstatic/images/changyuliu/file.svg") no-repeat 0px 7px;
}
.tool .file:hover {
    color: #1bcc70;
}
.tool .file:hover:before {
    background: url("/assstatic/images/changyuliu/file-hov.svg") no-repeat 0px
        7px;
}
.tool .progress:before {
    background: url("/assstatic/images/changyuliu/progress.svg") no-repeat 0px
        7px;
}
.tool .allFile:before {
    background: url("/assstatic/images/changyuliu/allFile.svg") no-repeat 0px
        7px;
}
.tool .allFile:after {
    background: url("/assstatic/images/changyuliu/allSlide.svg") no-repeat 1px
        2px;
}

.tool .prevData:before {
    background: url("/assstatic/images/changyuliu/prev.svg") no-repeat 0px 7px;
}
.tool .prevData:hover {
    color: #1bcc70;
}
.tool .prevData:hover:before {
    background: url("/assstatic/images/changyuliu/prev-hov.svg") no-repeat 0px
        7px;
}

.tool .nextData:before {
    background: url("/assstatic/images/changyuliu/next.svg") no-repeat 0px 7px;
}
.tool .nextData:hover {
    color: #1bcc70;
}
.tool .nextData:hover:before {
    background: url("/assstatic/images/changyuliu/next-hov.svg") no-repeat 0px
        7px;
}

.tool .badData:before {
    background: url("/assstatic/images/changyuliu/badFile.svg") no-repeat 0px
        6px;
}
.tool .badData:hover {
    color: #1bcc70;
}
.tool .badData:hover:before {
    background: url("/assstatic/images/changyuliu/badFile-hov.svg") no-repeat
        0px 6px;
}

.tool .badData.r:before {
    background: url("/assstatic/images/changyuliu/goodFile.svg") no-repeat 0px
        6px;
}
.tool .badData.r:hover:before {
    background: url("/assstatic/images/changyuliu/goodFile-hov.svg") no-repeat
        0px 6px;
}
.tool .badData.r:hover {
    color: #1bcc70;
}
.tool .slide {
    float: right;
    padding-left: 15px;
    height: 15px;
    margin-top: 15px;
    position: relative;
    right: 15px;
    position: absolute;
}
.tool .slide {
    width: 20px;
    height: 20px;
}
.tool .slide {
    background: url("/assstatic/images/changyuliu/slide.svg") no-repeat 5px 6px;
    overflow: hidden;
}
.slide-up-enter-active {
    transition: all 0.15s;
}
.slide-up-leave-active {
    transition: all 0.15s;
}
.slide-up-enter,
.slide-up-leave-to {
    height: 0;
}

.tool .line {
    float: right;
    padding-left: 15px;
    height: 15px;
    margin-top: 18px;
    margin-right: 20px;
    border-right: 1px solid #dadbdb;
    position: absolute;
    right: 26px;
}
</style>
